<script setup lang="ts">
import LoginPrompt from '@/components/LoginPrompt/LoginPrompt.vue'
import SafeTopContainer from '@/components/SafeTopContainer/SafeTopContainer.vue'
import useUserStore, { type UserInfo } from '@/store/modules/user'
import { formatPrice } from '@/utils'
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { ref } from 'vue'

const userStore = useUserStore()
const message = useMessage()
const toast = useToast()
const customerShow = ref(false)
const customerWechatShow = ref(false)
const noLoginShow = ref(false)

const userInfo = ref<UserInfo | null>(null)
const balance = computed(() => userStore.totalRechargeAmount)

onLoad(() => {
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline'],
  })
})

onShow(async () => {
  const token = getToken()
  if (!token) {
    noLoginShow.value = true
  }
  else {
    await userStore.getUserInfo()
    userInfo.value = userStore.userInfo
  }
})

onShareAppMessage((res) => {
  const inviteId = userInfo.value.customerType === 'agentCus' ? userInfo.value.customerUuid : null
  return {
    title: 'U车查',
    path: `/pages/home/index?inviteId=${inviteId}`,
  }
})

onShareTimeline((res) => {
  const inviteId = userInfo.value.customerType === 'agentCus' ? userInfo.value.customerUuid : null
  return {
    title: 'U车查',
    path: `/pages/home/index?inviteId=${inviteId}`,
  }
})

function handleLogout() {
  message.confirm({
    msg: '确定退出登录吗？',
    title: '提示',
    zIndex: 99999,
  }).then(() => {
    userStore.logout()
    toast.success({
      msg: '退出登录成功',
      duration: 1000,
      closed: () => {
        uni.reLaunch({
          url: '/pages/home/index',
        })
      },
    })
  })
}

function navigateTo(url: string) {
  uni.navigateTo({
    url,
  })
}

function handleCopyText(data) {
  uni.setClipboardData({
    data,
    success() {
      uni.showToast({
        title: '复制成功',
        icon: 'none',
        duration: 1000,
      })
    },
  })
}
function handlePhoneCall(phone) {
  uni.makePhoneCall({
    phoneNumber: phone,
  })
}

function maskPhoneNumber(phone: string): string {
  return phone.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
}
</script>

<template>
  <div class="user-container bg-top">
    <safe-top-container :padding-bottom="40" />
    <div class="user-info">
      <div class="mb-5 flex items-center justify-between">
        <div class="flex items-center pl-5">
          <img src="" class="h-13 w-13 rounded-full object-cover" alt="">
          <div class="ml-3">
            <template v-if="userInfo">
              <div class="text-lg font-bold">
                {{ maskPhoneNumber(userInfo?.customerPhone) }}
              </div>
              <div class="text-sm text-[#666]" @click="navigateTo('/pages/my/profile')">
                个人资料 <wd-icon name="arrow-right" size="22px" />
              </div>
            </template>
            <template v-else>
              <div class="text-lg font-bold">
                请登录
              </div>
            </template>
          </div>
        </div>
        <div class="user-share flex items-center justify-center px-4">
          <wd-button type="text" open-type="share" icon="share" custom-class="!font-bold">
            分享
          </wd-button>
        </div>
      </div>
      <div class="user-balance bg-balance mx-4 mb-4 flex items-center justify-between rounded-lg p-5">
        <div class="text-white">
          <div class="">
            <div class="text-sm">
              账户余额 (元)
            </div>
            <div class="text-[33px] text-white font-bold">
              {{ formatPrice(balance) }}
            </div>
            <div class="mt-1 text-sm" @click="navigateTo('/pages/my/records')">
              账户明细 <wd-icon name="arrow-right" size="22px" />
            </div>
          </div>
        </div>
        <div>
          <wd-button size="small" custom-class="!bg-[#7487FF]" @click="navigateTo('/pages/recharge/index')">
            去充值
          </wd-button>
        </div>
      </div>
      <div class="px-5 pt-3">
        <div class="rounded-xl bg-white px-1 py-1 shadow-sm">
          <wd-cell-group :border="true" custom-class="!rounded-lg">
            <wd-cell title="联系客服" label="" is-link link="/pages/my/order/index" size="large" @click="customerShow = true">
              <template #icon>
                <img src="@/static/svg/user-phone.svg" class="mr-2 h-6 w-6">
              </template>
            </wd-cell>
            <wd-cell title="客服微信" label="" is-link link="/pages/my/collection/index" size="large" @click="customerWechatShow = true">
              <template #icon>
                <img src="@/static/svg/user-wechat.svg" class="mr-2 h-6 w-6">
              </template>
            </wd-cell>
            <wd-cell title="关于我们" label="" is-link to="/pages/my/about" size="large">
              <template #icon>
                <img src="@/static/svg/user-about.svg" class="mr-2 h-6 w-6">
              </template>
            </wd-cell>
            <wd-cell title="常见问题" label="" is-link to="/pages/my/help" size="large">
              <template #icon>
                <img src="@/static/svg/user-question.svg" class="mr-2 h-6 w-6">
              </template>
            </wd-cell>
            <wd-cell title="签名绑定" label="" is-link to="/pages/my/signature" size="large">
              <template #icon>
                <img src="@/static/svg/user-signature.svg" class="mr-2 h-6 w-6">
              </template>
            </wd-cell>
          </wd-cell-group>
        </div>
        <!--        <div class="rounded-xl bg-white p-4 shadow-sm"> -->
        <!--          <div class="mb-3 text-base font-semibold"> -->
        <!--            个人服务 -->
        <!--          </div> -->

        <!--          <div class="grid grid-cols-4 gap-4 text-center mt-3"> -->
        <!--            <div -->
        <!--              v-for="item in serviceItems" -->
        <!--              :key="item.name" -->
        <!--              class="flex flex-col cursor-pointer items-center text-sm text-gray-700 space-y-1 hover:text-blue-600" -->
        <!--              @click="handleClick(item)" -->
        <!--            > -->
        <!--              <div -->
        <!--                v-if="item.icon" -->
        <!--                class="h-7 w-7 flex items-center justify-center rounded-full text-white" -->
        <!--              > -->
        <!--                <img :src="item.icon" alt="icon" class="wh-full"> -->
        <!--              </div> -->
        <!--              <div>{{ item.name }}</div> -->
        <!--            </div> -->
        <!--          </div> -->
        <!--        </div> -->
        <div class="pt-6">
          <wd-button
            type="info"
            block
            custom-class="!w-full !h-10 !text-base !font-medium check-btn"
            :round="false"
            @click="handleLogout"
          >
            退出账户
          </wd-button>
        </div>
      </div>
    </div>
  </div>
  <wd-overlay :show="customerWechatShow" :z-index="999999" @click="customerWechatShow = false">
    <div class="h-full w-full flex items-center justify-center">
      <div class="relative h-[780rpx] w-[520rpx] rounded-lg bg-white p-5 text-center">
        <div class="dreamy-gradient-bg absolute left-0 top-0 h-[30%] w-full rounded-lg" />
        <div class="mb-5 text-[19px] font-bold">
          客服微信
        </div>
        <div class="mx-10 my-3 border-2px border-[#2540F3] rounded border-dotted p-1">
          <!--          <image :show-menu-by-longpress="true" src="https://img.picui.cn/free/2025/05/09/681db2498cc51.png" class="h-[300rpx] w-[300rpx]" /> -->
        </div>
        <div class="mb-5 text-[16px] text-[#666666]">
          <div>微信号：<span class="text-[#2540F3]">wangqiang-412710</span></div>
          <div class="mt-1">
            长按识别二维码
          </div>
        </div>
        <div class="w-full flex flex-col gap-3">
          <wd-button type="primary" size="large" block :round="false" @click="handleCopyText('wangqiang-412710')">
            复制微信号
          </wd-button>
          <wd-button type="info" size="large" block :round="false" @click="customerWechatShow = false">
            取消
          </wd-button>
        </div>
      </div>
    </div>
  </wd-overlay>
  <wd-overlay :show="customerShow" :z-index="999999" @click="customerShow = false">
    <div class="h-full w-full flex items-center justify-center">
      <div class="relative h-[650rpx] w-[520rpx] rounded-lg bg-white p-5 text-center">
        <div class="dreamy-gradient-bg absolute left-0 top-0 h-[40%] w-full rounded-lg" />
        <div class="mb-4 h-40 w-full flex items-center justify-center text-blue-500">
          <img src="@/static/svg/customer.svg" alt="login" class="h-35 w-35">
        </div>
        <p class="mb-6 text-[18px] text-gray-700">
          请拨打 <span class="text-[#2540F3]" @click="handlePhoneCall('18652920043')">18652920043</span>
        </p>
        <div class="w-full flex flex-col gap-3">
          <wd-button type="primary" size="large" block :round="false" @click="handleCopyText('18652920043')">
            复制手机号
          </wd-button>
          <wd-button type="info" size="large" block :round="false" @click="noLoginShow = false">
            取消
          </wd-button>
        </div>
      </div>
    </div>
  </wd-overlay>
  <LoginPrompt v-model="noLoginShow" />
</template>

<style lang="scss" scoped>
.user-container {
  height: calc(100vh - 85px - 85px);
}
.user-info {
  position: relative;
  width: 100%;
  height: 300rpx;
}
.user-share {
  border-radius: 100rpx 0 0 100rpx;
  background: #B4CBFF;
}
.user-balance{
  background-image: url('http://img.zblack.cn/i/2025/07/02/6864ae9477422.png');
  background-size: cover;
  background-position: center;
}
</style>

<route lang="json5">
{
layout: 'tabbar',
}
</route>
